<template>
	<view class="page" @touchstart="touchS" @touchend="touchE">
		<!-- 头部 start -->
		<view class="head" :style="{display: displayHead}" @tap="toCircleInfo">
			<view class="left-box">
				<view class="left">
					<image class="icon" :src="iconUrl" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 头部 end -->
		
		<!-- 尾部 start -->
		<view class="tail-box">
			<view class="right" @tap="toCircleInfo">
				<view class="up">
					{{slogan}}
				</view>
				<view class="down">
					{{title}}
				</view>
			</view>
			<view class="tail">
				<view class="address">
					<view class="iconfont icon-ic_dizhi" style="color: #5080FE;font-size: 18px;"></view>
					<view class="address-text">{{address}}</view>
				</view>
				<view class="operate">
					<button class="join butt" @tap="toJoin" v-if="status == 0">
						加入
					</button>
					<button class="joined butt" v-else>
						已加入
					</button>
					<button @tap="toInvite" class="invite butt">
						邀请
					</button>
				</view>
			</view>
		</view>
		<!-- 尾部 end -->
		<view :style="{display: displayExit}" @tap="toExit" class="exit">
			<view class="">
				退圈
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'circleCompo',
		data() {
			return {
				displayExit: 'none',
				displayHead: 'block',
				startX: 0
			}
		},
		props: {
			circleId: 0,
			iconUrl: '',
			slogan: '',
			title: '',
			address: '',
			status: 0
		},
		methods: {
			closeExit(){
				this.displayExit = 'none';
				this.displayHead = 'block';
			},
			toJoin(){
				this.$emit('toJoin', this.circleId);
			},
			toExit(){
				this.$emit('toExit', this.circleId);
				this.displayExit = 'none';
				this.displayHead = 'block';
			},
			toInvite(){
				this.$emit('toInvite', this.circleId);
			},
			toCircleInfo(){
				if (this.displayExit == 'block'){
					this.displayExit = 'none';
					this.displayHead = 'block';
				}else{
					this.$emit('toCircleInfo', this.circleId);
				}
			},
			touchS: function (e) {
				// console.log('touchS')
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX
					// console.log(this.startX)
				}
			},
			touchE: function (e) {
				// console.log('touchE')
				if (e.changedTouches.length == 1 && this.status == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					this.$emit("closeExit");
					if(disX > 100){
						this.displayExit = 'block';
						this.displayHead = 'none';
					}else if(disX < -100){
						this.displayExit = 'none';
						this.displayHead = 'block';
					}
				}
			}
		}
	}
</script>

<style>
	
	@import url("../../static/iconfont/iconfont.css");
	
	.page {
		margin-left: 2.5%;
		background-color: white;
		width: 95%;
		border: 1px solid #EAEAEA;
		border-radius: 12upx;
		margin-top: 35upx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		height: 250rpx;
		box-shadow: 3px 3px 13px 0px rgba(0,0,0,0.1);
	}
	/* 头部 start */
	.head {
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 15px;
		width: 15%;
	}
	.left-box {
		width: 14%;
	}
	.left {
		background-color: #B4EBF1;
		height: 140upx;
		width: 140upx;
		border-radius: 16upx;
		overflow: hidden;
	}
	.up {
		color: #595976;
	}
	.down {
		font-size: 25px;
		color: #25265E;
		font-weight: bold;
		line-height: 40px;
	}
	.right {
		margin-left: 12%;
		width: 100%;
		height: 180upx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.icon {
		width: 140upx;
		height: 140upx;
		line-height: 140upx;
	}
	/* 头部 end */
	
	/* 尾部 start */
	.tail-box {
		display: flex;
		flex-direction: column;
		width: 85%;
	}
	.tail {
		border-top: 2px dashed #ECECEC;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 111%;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
		color: #888888;
		margin-left: -20%;
		align-items: center;
	}
	.operate {
		display: flex;
		flex-direction: row;
		width: 45%;
		justify-content: space-between;
	}
	/* 尾部 end */
	.exit {
		background-color: #F2F2F2;
		width: 18%;
		line-height: 250rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.address {
		width: 57%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		flex-direction: row;
	}
	.address-text {
		margin-left: 20upx;
		color: #595976;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.butt {
		margin-top: 0px;
		margin-left: 15upx;
		padding: 0px 20upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 4px;
		width: 150upx;
	}
	.joined {
		background-color: #EDF2FE;
		color: #6A92FE;
		width: 180upx;
	}
	.join {
		background-color: #FC8CA3;
	}
</style>